//作用: 用于压缩,css,js,自动生成  sass生成css
const gulp = require("gulp")  //引入gulp模块
//创建
// gulp.task("hqnb",()=> {
//     console.log("你是杀不") 
// })

//gulp的方法
// src    找方法,来源
// task   任务
// dest   目标
// pipe   管道方法
// watch  监听

//路径的技巧:  *代表所有scss结尾的    **代表目录下的所有文件

//1. 压缩html  指令 cnpm i gulp-htmlmin -D




//2. 导入gulp-html模块
const htmlmin = require("gulp-htmlmin");
//3. 创建一个压缩html的任务
gulp.task("HTMLmin", () => {            //gulp HTMLmin   把文件压缩到dist里面
    gulp.src(["./src/**/*.html", "./src/**/*.htm"]).pipe(htmlmin({
        removeComments: true,          //清除HTML注释
        collapseWhitespace: true,      //压缩HTML
    })).pipe(gulp.dest("./dist/"));    //会把html文件放到dist里面
})




//4. 处理sass传值到css 
const sass = require('gulp-sass');      //引入sass主模块
sass.compiler = require('node-sass');  //引入sass压缩模块

gulp.task("sass", () => {
    //来源
    gulp.src("./src/sass/*.scss").pipe(sass().on('error', sass.logError)).pipe(gulp.dest("./src/css"))
})



//5. 压缩处理css
const minCss = require("gulp-clean-css")  //会自动压缩清理空格和注释
gulp.task("minCss", () => {
    gulp.src(["./src/css/*.css"])
        .pipe(minCss())
        .pipe(gulp.dest("./dist/css/"))   //加中括号可以传多个格式的文件
});


//6. css的私有前缀,在css压缩之前添加
const autoprefixer = require('gulp-autoprefixer');
gulp.task('testAutoFx', function () {
    gulp.src('src/css/*.css')
        .pipe(autoprefixer({

            browsers: ['last 2 versions', 'Android >= 4.0'],
            cascade: true,         //是否美化属性值 默认：true 像这样：
            remove: true           //是否去掉不必要的前缀 默认：true

        })).pipe(gulp.dest('dist/css/'));
});


//7. js压缩
const babel = require("gulp-babel")
const minJs = require('gulp-uglify')   //不支持ES6,所以需要先转换
gulp.task("minJs", () => {
    gulp.src("./src/js/**/*.js")
        .pipe(babel())           //压缩之前,把ES6转换成ES5
        .pipe(minJs())
        .pipe(gulp.dest('./dist/js'))
});


//8. 图片的压缩 
const imagemin = require("gulp-imagemin");
gulp.task("imagemin", () => {        // （**匹配src/js的0个或多个子文件夹） 
    gulp.src(['./src/images/*.{png,jpg,gif,svg,jpeg}'])
        .pipe(imagemin())
        .pipe(gulp.dest("./dist/images/"))
});



//监听状态
gulp.task("sass:watch", function () {
    gulp.watch(["./src/**/*.html", "./src/**/*.htm"], ['HTMLmin']);        //什么文件产生变化,就触发什么命令
    gulp.watch("./src/sass/*.scss", ['sass', "testAutoFx", "minCss"]);
    gulp.watch("./src/js/**/*.js", ['minJs'])
    gulp.watch("./src/images/*.{png,jpg,gif,svg,jpeg}", ['imagemin'])
});




//统一运行
gulp.task("default", ["HTMLmin", "sass", "imagemin", "testAutoFx", "minCss", "sass:watch", "minJs"]);

// gulp.task("default", [ "sass", "sass:watch"]);
//最后写完后,需要gulp开始执行